<template>
	<view class="lay" :style="{backgroundImage:'url('+imageURL+')'}">
			<uni-nav-bar 
			background-color="transparent" 
			:border="false"
			leftIcon="back"
			rightIcon="more-filled"
			color="white"
			@clickLeft="back"
			@clickRight="navTo('/pages/chat/data-settings',friend.id)"
			></uni-nav-bar>
			<view class="info-card">
				<uni-card>
					<view class="info-name">
						{{friend.userName}}
						<!-- 如果两人不是好友 则显示该按钮，若两人是好友，则隐藏该按钮 -->
						<button v-if="!isFriend" @click="addFriend"><uni-icons type="plusempty" color="#0080FF" size="10"></uni-icons> 加好友</button>
					</view>
					<view class="certification">
						<text>{{school===null?'未认证':school}}</text>
						<button v-if="school!=null"><uni-icons type="auth-filled"  color="#0080FF"></uni-icons> 高级认证</button>
						<button style="margin-left: 1%;">标准版</button>
					</view>
					<view class="dynamic">
						<button><uni-icons type="pyq" color="#989898"></uni-icons>同事动态</button>
						<button><uni-icons type="calendar" color="#989898"></uni-icons>TA的日程</button>
						<button><uni-icons type="staff" color="#989898"></uni-icons> 和TA的交集</button>
					</view>
				</uni-card>
				<u-avatar
					size="60"
					:text="getAvatar(friend)"
					shape="square" 
					bg-color="#0080FF"
					font-size='20'
					:src="friend.avaUrl">
				</u-avatar>
			</view>
			
			<view class="more-info">
				<text>更多信息</text>
				<uni-card>
					<text style="margin-left: 0%;">钉钉名片</text>
					<uni-icons type="forward" color="#989898"></uni-icons>
				</uni-card>
			</view>

			<view class="source">
				<uni-card>
					<view class="dingtalk-number">
						<text style="color: #989898;">手机号</text>
						<text style="margin-left: 20%;color: black;">{{friend.phone}}</text>
					</view>
					<!-- 若两人为好友则显示该按钮，若两人不是好友则隐藏该按钮 -->
					<view class="add-way" v-show="isFriend">
						<text style="color: #989898;">来源</text>
						<text style="margin-left: 24%; color: black;">通过电话号码搜索添加</text>
					</view>
				</uni-card>
			</view>
		
			<view class="send-msg-bt">
				<button style="width: 70%;" @click="navTo('/pages/chat/chat',friend.id)"><uni-icons type="chat-filled" color="#0080FF" ></uni-icons> 发消息</button>
				<button style="width: 15%;"><uni-icons type="more-filled" color="#0080FF"></uni-icons></button>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isFriend:false,
				imageURL:'/static/book/bm3.jpg',
				text:'',
				user:{},
				// 好友用户信息
				friend:{
					id:0,
					userName:'',
					phone:'',
					avaUrl:'',
				},
				school:'玉林师范学院',
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			navTo(url,id){
				uni.navigateTo({
					url:url+'?id='+id
				})
			},
			getAvatar(friend){
				let text = '';
				if(friend.avaUrl == null|| friend.avaUrl.length == 0){
					text = friend.userName.slice(-2);
				}else{
					text = null;
				}
				return text;
			},	
			addFriend(){
				uni.navigateTo({
					url:'/pages/book/addNewFriend/validation'
				})
			},
		},
		onLoad(options) {
			this.user = uni.getStorageSync('user')
		    uni.request({
				url:"http://localhost:8090/nailCampus/friend/getRelationship/"+options.id,
				method:'GET',
				header:{
					"token":uni.getStorageSync('token')
				},
				success:res=> {
					console.log(res.data)
					if(res.data.code===200){
						this.isFriend = true
					}
					console.log(this.isFriend)
				}
			})
			uni.request({
				url:"http://localhost:8090/nailCampus/user/getUserById/"+options.id,
				method:'GET',
				success:res=> {
					this.friend = res.data.data
					this.school = res.data.data.schoolName
					uni.setStorageSync('friend',this.friend)
				}
			})

		}
	}
</script>

<style lang="less" scoped>
.lay{
	width: 100%;
	height: 1200rpx;
	.info-card{
		margin-top: 15%;
		.info-name{
			display: flex;
			margin-left: 25%;
			font-size: 40rpx;
			font-weight: 600;
			color: black;
			letter-spacing: 2rpx;
			button{
				background-color: #E0F2FE;
				margin-left: 45%;
				color: #0080FF;
				font-size: 20rpx;
				padding: 0%;
				padding-left: 3%;
				padding-right: 3%;
				line-height: 45rpx;
			}
			button::after{
				border: none;
			}
			button:active{
				background-color: #d0e0eb;
			}
		}
		.certification{
			width: 80%;
			display: flex;
			margin-top: 7%;
			// border: 1rpx solid red;
			text{
				// border: 1rpx solid red;
			}
			button{
				border: 1rpx solid #e5e5e5;
				display: flex;
				margin-left: 3%;
				background-color: white;
				font-size: 20rpx;
				padding: 0rpx;
				padding-left: 2%;
				padding-right: 2%;
				color: #989898;
				height: 50rpx;
				border-radius: 10rpx;
				::v-deep .uni-icons{
					line-height: 45rpx;
				}
			}
			button::after{
				border: none;
			}
		}
		.dynamic{
			margin-top: 4%;
			display: flex;
			button{
				padding-left: 0rpx;
				line-height: 60rpx;
				background-color: white;
				font-size: 28rpx;
				letter-spacing: 1rpx;
				height: 60rpx;
				color: #989898;
			}
			button::after{
				border: none;
			}
			button:active{
				color: black;
			}
		}
	}
	.more-info{
		text{
			color: #989898;
			font-size: 27rpx;
			margin-left: 5%;
		}
		::v-deep .uni-icons{
			float: right;
		}
		.uni-card:active{
			background-color: #cecece;
		}
	}
	.source{
		.dingtalk-number{
			display: flex;
			text{
				font-size: 27rpx;
			}
		}
		.add-way{
			margin-top: 2%;
			display: flex;
			text{
				font-size: 27rpx;
			}
		}
	}
	
	.send-msg-bt{
		margin-top: 40%;
		display: flex;
		button{
			letter-spacing: 1rpx;
			color: #0080FF;
			border-radius: 15rpx;
			font-size: 30rpx;
			padding: 0rpx;
			background-color: #E0F2FE;
		}
		button::after{
			border: none;
		}
	}
	/* #ifdef H5 */
	.u-avatar{
		position: absolute;
		top: 160rpx;
		left: 80rpx;
		border: 6rpx solid white;
		border-radius: 10px;
	}
	/* #endif */
	/* #ifdef MP-WEIXIN */
	::v-deep .u-avatar{
		position: absolute;
		top: 160rpx;
		left: 80rpx;
		border: 6rpx solid white;
		border-radius: 10px;
	}
	/* #endif */
	
}

</style>
